<template>
  <div class="box">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item to="/login" replace>首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/login/user" replace>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>学信网信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableBox">
      <div class="tableTitle">学信网信息</div>
      <div class="table">
        <div class="title">学籍信息</div>
        <el-tabs type="border-card">
          <el-tab-pane v-for="item in school_info" :key="item.examination_id" :label="item.edu_level">
            <div>
              <el-row>
                <el-col :span="4">姓名</el-col>
                <el-col :span="4">{{item.realname||'无数据'}}</el-col>
                <el-col :span="4">性别</el-col>
                <el-col :span="4">{{item.gender||'无数据'}}</el-col>
                <el-col :span="4">民族</el-col>
                <el-col :span="4">{{item.nation||'无数据'}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="4">出生日期</el-col>
                <el-col :span="4">{{item.birthday||'无数据'}}</el-col>
                <el-col :span="4">身份证号码</el-col>
                <el-col :span="4">{{item.card_id||'无数据'}}</el-col>
                <el-col :span="4">考生号</el-col>
                <el-col :span="4">{{item.examination_id||'无数据'}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="4">学号</el-col>
                <el-col :span="4">{{item.student_id||'无数据'}}</el-col>
                <el-col :span="4">院校名称</el-col>
                <el-col :span="4">{{item.school||'无数据'}}</el-col>
                <el-col :span="4">学院</el-col>
                <el-col :span="4">{{item.college||'无数据'}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="4">系（所、函授站）</el-col>
                <el-col :span="4">{{item.department||'无数据'}}</el-col>
                <el-col :span="4">专业</el-col>
                <el-col :span="4">{{item.major||'无数据'}}</el-col>
                <el-col :span="4">班级</el-col>
                <el-col :span="4">{{item.classname||'无数据'}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="4">学历层次</el-col>
                <el-col :span="4">{{item.edu_level||'无数据'}}</el-col>
                <el-col :span="4">学制</el-col>
                <el-col :span="4">{{item.edu_system||'无数据'}}</el-col>
                <el-col :span="4">学历类别</el-col>
                <el-col :span="4">{{item.edu_type||'无数据'}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="4">学习形式</el-col>
                <el-col :span="4">{{item.edu_form||'无数据'}}</el-col>
                <el-col :span="4">入学日期</el-col>
                <el-col :span="4">{{item.entrance_date||'无数据'}}</el-col>
                <el-col :span="4">离校日期</el-col>
                <el-col :span="4">{{item.graduate_date||'无数据'}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="4">学籍状态</el-col>
                <el-col :span="4">{{item.status||'无数据'}}</el-col>
                <el-col :span="4">学籍信息图片</el-col>
                <el-col :span="4"><img :src="item.detail_img" alt=""></el-col>
                <el-col :span="4">头像照片</el-col>
                <el-col :span="4"><img :src="item.head_img" alt=""></el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="title">学历信息</div>
        <el-tabs type="border-card">
          <el-tab-pane v-for="item in education_info" :key="item.certificate_id" :label="item.edu_level">
            <div>
              <el-row>
                <el-col :span="4">姓名</el-col>
                <el-col :span="4">{{item.realname||'无数据'}}</el-col>
                <el-col :span="4">性别</el-col>
                <el-col :span="4">{{item.gender||'无数据'}}</el-col>
                <el-col :span="4">出生日期</el-col>
                <el-col :span="4">{{item.birthday||'无数据'}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="4">入学日期</el-col>
                <el-col :span="4">{{item.entrance_date||'无数据'}}</el-col>
                <el-col :span="4">离校日期</el-col>
                <el-col :span="4">{{item.graduate_date||'无数据'}}</el-col>
                <el-col :span="4">班级</el-col>
                <el-col :span="4">{{item.location||'无数据'}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="4">院校名称</el-col>
                <el-col :span="4">{{item.school||'无数据'}}</el-col>
                <el-col :span="4">专业</el-col>
                <el-col :span="4">{{item.major||'无数据'}}</el-col>
                <el-col :span="4">学历类别</el-col>
                <el-col :span="4">{{item.edu_type||'无数据'}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="4">学历层次</el-col>
                <el-col :span="4">{{item.edu_level||'无数据'}}</el-col>
                <el-col :span="4">学习形式</el-col>
                <el-col :span="4">{{item.edu_form||'无数据'}}</el-col>
                <el-col :span="4">学制</el-col>
                <el-col :span="4">{{item.certificate_id||'无数据'}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="4">系（所、函授站）</el-col>
                <el-col :span="4">{{item.edu_conclusion||'无数据'}}</el-col>
                <el-col :span="4">学籍信息图片</el-col>
                <el-col :span="4"><img :src="item.detail_img" alt=""></el-col>
                <el-col :span="4">头像照片</el-col>
                <el-col :span="4"><img :src="item.head_img" alt=""></el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        school_info: [],
        education_info: []
      }
    },
    created () {
    }
  }
</script>

<style lang="less" ref="stylesheet/less" scoped>
  .table {
    text-align: center;

    .title {
      font-weight: bold;
      padding: 15px 0;
      border-bottom: 1px solid #eee;
      background-color: #2e78f2;
      color: #fff;
    }

    .el-row {
      display: flex;

      .el-col {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 0;
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;

        &:nth-child(2n+1) {
          color: #000;
          font-weight: 700;
        }

        &:last-child {
          border-right: none;
        }
      }
    }

    .el-tabs {
      .el-tab-pane {
        .el-row {
          .el-col {
            &:first-child {
              border-left: 1px solid #eee;
            }

            &:last-child {
              border-right: 1px solid #eee;
            }
          }

          &:first-child {
            .el-col {
              border-top: 1px solid #eee;
            }
          }
        }
      }
    }
  }
</style>
